<template>

<div   style="padding-left: 250px; padding-right: 250px">
  <div class="card"  style="margin-bottom: 10px">
    <span style="padding-left: 45%">个人资料</span>
  </div>
  <div class="card">

    <el-form   :model="data.form.data[0]" label-width="100px" label-position="right" style="padding-right: 30px">
      <el-form-item v-if="data.form.data[0].role==='Student'"  label="上传头像">
        <el-upload  class="avatar-uploader" action="http://localhost:9999/upload"  :show-file-list="false"
                    :on-success="handleImgUPloadSuccess" >
          <img v-if="data.form.data[0].avatar" :src="data.form.data[0].avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon" > <plus /></el-icon>

        </el-upload>

      </el-form-item>
      <el-form-item label="学生账号" >
        <el-input v-model="data.form.data[0].username" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="学生密码" >
        <el-input show-password v-model="data.form.data[0].password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生名称" >
        <el-input v-model="data.form.data[0].name " autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生手机号" >
        <el-input v-model="data.form.data[0].phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学生邮箱" >
        <el-input v-model="data.form.data[0].email" autocomplete="off" />
      </el-form-item>

      <el-form-item label="学生生日" >
        <el-date-picker style="width: 100%;" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  v-model="data.form.data[0].birth" ></el-date-picker>
      </el-form-item>

      <div style="margin-top: 20px;margin-bottom: 20px;">
        <span style="margin-left: 60px;">学生性别</span>
        <el-radio-group style=" margin-left: 20px; " v-model="data.form.data[0].sex " >
          <el-radio-button  label="boy" />
          <el-radio-button  label="girl" />
        </el-radio-group>
        <span style="margin-left: 30px;">学生角色</span>
        <el-radio-group style=" margin-left: 20px; " v-model="data.form.data[0].role " >
          <el-radio-button v-if="data.form.data[0].role==='Root'"  label="Root" />
          <el-radio-button v-if="data.form.data[0].role==='Student'"  label="Student" />
        </el-radio-group>

      </div>
      <el-form-item style="padding-left: 480px">
        <el-button type="primary" @click="update">保存</el-button>
      </el-form-item>


    </el-form>





  </div>
</div>





</template>








<script   setup>

import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";
import {Plus} from "@element-plus/icons-vue";


const data =reactive({


  form:JSON.parse(localStorage.getItem('student-user')||'{}')//获取当前用户信息



})


const handleImgUPloadSuccess = (res) =>{
  data.form.data[0].avatar=res.url

}


const update = () =>{
  request.put("/manage/update",data.form.data[0]).then(res=>{
    console.log(data.form.data[0])

    if (res.data.code===1){
      //重新获取数据

      data.formVisible=false  //关闭弹窗
      ElMessage.success( "操作成功")
       router.push('/login')

    }else {
      console.log(res)
      ElMessage .error("操作失败")
    }



  })

}




</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
